/**
 * 复用的是组件的状态和功能，传入的是UI要呈现的效果。
 */

import React, { Component } from 'react';

import './cursor.css'

// renderProps模式
// 只负责：定义状态数据和修改状态数据的方法
class MouseDataProvider extends Component {

  // 设置状态数据：
  state = {
    x: 0,
    y: 0
  }

  // 处理鼠标位置信息
  handlerPos = (e) => {
    // console.log(e);
    // 做响应式
    this.setState({
      x: e.x,
      y: e.y
    })
  }

  //事件：mousemove
  componentDidMount() {
    window.addEventListener('mousemove', this.handlerPos)
  }


  // 解绑事件
  componentWillUnmount() {
    window.removeEventListener('mousemove', this.handlerPos)
  }

  render() {
    return (
      <div>
        {/* 共享state()复用 */}
        {this.props.render(this.state)}
      </div>
    );
  }
}


// 调用
class App extends Component {
  render() {
    return (
      <div>
        {/* 测试renderProps */}
        <MouseDataProvider render={
          (state) => {
            return (
              <div>
                <h2 style={{ color: 'orange', fontSize: '60px' }}>鼠标位置：{state.x}:{state.y}</h2>
              </div>
            )
          }
        } />
        {/* 另个一组件 */}
        <MouseDataProvider render={
          (state) => {
            return (
              <div>
                <h1 style={{ color: 'red' }}>鼠标位置：{state.x}:{state.y}</h1>
              </div>
            )
          }
        } />
      </div>
    );
  }
}


export default App;